import React, { useState, useEffect } from 'react';
import ScrollView from './ScrollView';

const List = () => {
  const [data, setData] = useState({
    list: [],
  });
  const [loading, setLoading] = useState(false);

  const getData = () => {
    setLoading(true);
    let list = new Array(50).fill(1).map((item, index) => {
      return index;
    });
    setTimeout(() => {
      setData({
        list: data.list.concat(list),
      });
      setLoading(false);
    }, 2000);
  };
  /* 滚动到底部触发 */
  const handerScrolltolower = () => {
    console.log('scroll已经到底部');
    getData();
  };
  /* 初始化请求数据 */
  useEffect(() => {
    getData();
  }, []);

  return (
    <ScrollView
      data={data}
      component={Item}
      scrolltolower={handerScrolltolower}
      scroll={() => {}}
      loading={loading}
    />
  );
};

export default List;

/* item 完全是单元项的渲染ui */
function Item({ item }) {
  return <div className="listItem">this is a list item {item}</div>;
}
